<template>
  <div id="user-attribute">
    <v-header title="用户属性" @on-save="save" :showDownloadBtn="false" :saveShow="tryold"></v-header>
    <div class="box">
      <div class="box-con">
        <div class="attribute-analysis" v-show="toggleValue === 'index'">
          <div>
            <div class="query-conditions">
              <div class="attr-conditions bg-color-white">
                <!-- ----------常用--------- -->
                <div class="comm-used">
                  <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode"
                                :setTransCode="setTransCode"
                                :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                                num="08"></v-pageHeader>
                </div>
                <!-- ----------分组--------- -->
                <div class="border-bottom ovh com-content" v-for="(val, index) in groupVal" :key="val.key">
                  <span class="lf font12">分组</span>
                  <el-select class="width160 lf" v-model="groupVal[index].meta_id" placeholder="请选择"
                             @change="changeGroupVal(index)" size="mini">
                    <el-option
                      v-for="item in data.META_COLUME"
                      :key="item.meta_id"
                      :label="item.colume_chs"
                      :value="item.meta_id">
                    </el-option>
                  </el-select>
                  <div class="lf">
                    <!--<v-numberSelect class="lf" type="all"></v-numberSelect>-->
                    <i class="iconfont icon-add" @click="add('group', index)"></i>
                    <i v-if="groupVal.length > 1" class="iconfont icon-close" @click="remove('group', index)"></i>
                  </div>
                </div>
              </div>

              <!-- ------事件筛选------ -->
              <div class="filter-conditions  bg-color-white font12">
                <div class="conditions-list">
                  <div v-if="this.conditionList.length >= 2" class="group-btn" @click="toggle">
                    <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
                  </div>
                  <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
                    <div class="group-head" v-if="index !== 0"></div>
                    <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
                      <div class="item-btn" v-if="ind !== 0">
                        <v-button :width="30" @on-click="toggleRelationship(item)"
                                  :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                      </div>
                      <div class="condition-group-item">
                        <el-select v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                                   @change="changeEvent(item)" filterable size="mini">
                          <el-option
                            v-for="val in cond_arr1"
                            :key="val.key"
                            :label="val.colume_chs"
                            :value="val.meta_id">
                          </el-option>
                        </el-select>
                        <el-select v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                                   @change="changeAttr(item)" filterable size="mini">
                          <el-option
                            v-for="val in cond_arr2"
                            :key="val.key"
                            :label="val.code_value_nm_cns"
                            :value="val.code_value">
                          </el-option>
                        </el-select>
                        <el-input v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]" size="mini"></el-input>
                        <div class="date-time lf" v-if="getBool_2(item)">
                          <span>在</span>
                          <el-date-picker
                            size="mini"
                            class="width270"
                            v-model="item.vs_date_value"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="change(item, ind)">
                          </el-date-picker>
                          <span>之间</span>
                        </div>
                        <div class="amount-range lf" v-if="getBool_3(item)">
                          <span>在</span>
                          <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                          <span>和</span>
                          <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" sizs="mini"></el-input>
                          <span>之间</span>
                        </div>
                        <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                          :closable="true"></v-selectCheckbox>
                        <div class="icons-list lf">
                          <!--<i v-if="item.vs_data_type === 'text'" class="iconfont icon-revise"></i>-->
                          <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                          <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="add-condition">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
                  <span>筛选条件</span>
                </div>
                <div class="examine">
                  <div class="btns rf">
                    <el-button type="primary" size="mini" @click="search">查看</el-button>
                    <el-button size="mini" @click="cancelEven">重置</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="view-user-wealth bg-color-white">
              <div style="width: 100%">
                <range-date-picker class="timewidth210 height30" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
                <!--<div class="block">-->
                <!-- <el-date-picker
                  size="mini"
                  v-model="dates"
                  type="daterange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getDate"
                  :picker-options="disableDate">
                </el-date-picker> -->
                <!--</div>-->
                <div class="conditions">
                </div>
              </div>
              <!-- ----------------------Echarts图---------------------- -->
              <div class="user-echarts">
                <chart :options="option" style="width: 100%;" v-if="this.option.series.length > 0"></chart>
                <VNoData v-if="attListContent.length <= 0"></VNoData>
              </div>
            </div>
            <div class="serch-result bg-color-white">
              <div v-if="attListContent.length > 0">
                <table class="table-rows" width="100%">
                  <thead>
                  <tr>
                    <!--<th v-for="item in groupVal" :key="item.key">{{item.code_value_nm_cns}}</th>-->
                    <th>{{groupVal[0].code_value_nm_cns}}</th>
                    <th v-for="item in attListHead" :key="item.key">{{item}}</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="item in attListContent" :key="item.key">
                    <td>{{item.by_value_name}}</td>
                    <td v-for="item in item.cells" :key="item.key">{{item.people}}</td>
                    <td @click="goUserList(item)" style="color: #016DFB; cursor: pointer">查看</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- - 用户列表 - -->
        <div v-show="toggleValue === 'userList'" class="userList">
          <user-list ref="userList" @on-goBack="toggleValue = 'index'" pageName="userDetail"></user-list>
        </div>
        <!-- - 用户详情 - -->
        <div v-if="toggleValue === 'userDetail'" class="userDetail">
          <user-detail pageName="userList"></user-detail>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    VInput,
    VButton,
    VHeader,
    VPageHeader,
    // VNumberSelect,
    VToolBar,
    RangeDatePicker
  } from '../../../../components'
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import {getDateTime, dateFormat} from '../../../../assets/js/index'
  import Msg from '../../../../assets/js/msg'
  import userList from '../../../../view/comm/userList.vue'
  import userDetail from '../../../../view/comm/userDetail'
  import store from '@/store'
  import VNoData from '../../../../components/VNoData/VNoData'

  export default {
    components: {
      VInput,
      VButton,
      VPageHeader,
      // VNumberSelect,
      VHeader,
      VToolBar,
      userList,
      userDetail,
      VNoData,
      RangeDatePicker
    },
    data () {
      return {
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        analyse_type: '08',
        Attribute: '', // 属性列表的值
        eventAttrArr: [], // 属性列表
        clustering: '', // 分组列表的值
        clusteringList: [], // 分组列表
        attListHead: [],
        attListContent: [],
        addGroupShowList: [],
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        tryold: true,
        checked: false,
        colors: ['#A1CFFF', '#F1BB50', '#94D475'],
        input21: '',
        eventList: [ // 进行操作后的事件列表， 作为参数传到后台
          {
            // meta_id: this.groupVal[index].meta_id,
            cond_value: [],
            cond_link: 'B010006#AND',
            cond_fmt: 'B010003#01',
            disp_serial: '0',
            vs_event_name: '',
            vs_isSelect: true,
            vs_radio: 0,
            vs_list: [],
            vs_colume_chs: '',
            vs_event_meta_id: ''
          }
        ],
        groupVal: [ // 分组返回的列表，作为参数传到后台
          {
            meta_id: '',
            colume_chs: ''
          }
        ],
        option: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        },
        dates: [], // 开始时间和结束时间
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        cond_arr1: null, // 条件筛选的第一框
        cond_arr2: null, // 条件筛选的第二框
        conditionList: [], // 筛选条件返回的list
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    computed: {
      // 'index' 显示主页，'userList' 显示用户列表，'userDetail' 显示用户详情
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      // 点击表单显示用户列表
      goUserList (obj, index) {
        this.tryold = false
        const paramsData = {
          message: {
            analyse_type: this.analyse_type,
            g_list: this.groupVal, // 分组
            w_list: this.conditionList, // 事件筛选
            from_date: this.from_date,
            to_date: this.to_date
          },
          reqjson: {
            meta_id: this.groupVal[0].meta_id,
            cond_value: [obj.by_value]
          },
          page: {
            pageNo: '1',
            pageSize: '100'
          }
        }
        sessionStorage.setItem('from_date', this.from_date)
        sessionStorage.setItem('to_date', this.to_date)
        sessionStorage.setItem('paramsData', JSON.stringify(paramsData))
        ajax.post(api.SELECTANALYSEUSEROBJECTLIST, paramsData).then(res => {
          store.commit('updateToggleValue', 'userList')
          this.userList = res.data
          this.$refs.userList.getUserList(this.userList)
        })
      },
      // 点击常用反显数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          // this.userGroup = data.user_group // 用户分群
          this.groupVal = data.g_list // 分组
          this.conditionList = data.w_list // 筛选条件
          // 获取时间格式化 再添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      },
      cancelEven () { // 重置
        this.dates = [] // 时间
        this.from_date = ''
        this.to_date = ''
        // 分组
        this.groupVal = [
          {
            meta_id: ''
          }
        ]
        this.conditionList = [] // 事件筛选
        this.option.series = [] // 清除echart图表
        this.attListContent = [] // 清除表格
      },
      // 区间日期改变事件
      change (item, ind) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime(val, 's')
          })
        }
      },
      show (index) {
        this.addGroupShowList.splice(index, 1, true)
      },
      hide (index) {
        this.addGroupShowList.splice(index, 1, false)
      },
      add (str, index) {
        if (str === 'event') {
          let itemParams = {
            meta_id: '',
            cond_value: [],
            cond_link: 'B010006#AND',
            cond_fmt: 'B010003#01',
            disp_serial: (index + 1) + '',
            vs_event_name: '',
            vs_isSelect: true,
            vs_radio: 0,
            vs_list: [],
            vs_colume_chs: '',
            vs_event_meta_id: ''
          }
          this.eventList.splice(index + 1, 0, itemParams)
          this.addEventShowList.splice(index + 1, 0, false)
        } else if (str === 'group') {
          let itemParams = {
            meta_id: '',
            disp_serial: (index + 1) + '',
            code_value_nm_cns: '',
            vs_code_id: '',
            vs_isSelect: true,
            code_value: ''
          }
          if (this.groupVal.length > 2) {
            Msg.alert('分组最多添加三个')
            return
          }
          this.groupVal.splice(index + 1, 0, itemParams)
          this.addGroupShowList.splice(index + 1, 0, false)
        }
      },
      remove (str, index) {
        if (str === 'event') {
          this.eventList.splice(index, 1)
          this.addEventShowList.splice(index, 1)
        } else if (str === 'group') {
          this.groupVal.splice(index, 1)
          this.addGroupShowList.splice(index, 1)
        }
      },
      // 分组事件改变
      changeGroupVal (index) {
        this.data.META_COLUME.forEach(item => {
          if (item.meta_id === this.groupVal[index].meta_id) {
            this.groupVal[index].code_value_nm_cns = item.colume_chs
            this.groupVal[index].vs_code_id = item.code_id
            this.groupVal[index].vs_isSelect = true
            this.groupVal[index].code_value = item.meta_id
          }
        })
        let list = []
        this.groupVal.forEach(item => {
          if (item.meta_id) {
            list.push(item)
          }
        })
        // this.$refs.toolBar.getGroupList(list)
      },
      save (obj) { // 点击保存为常用
        if (!this.groupVal[0].meta_id) {
          Msg.alert('请选择分组')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          g_list: this.groupVal, // 分组
          w_list: this.conditionList, // 事件筛选
          from_date: this.from_date,
          to_date: this.to_date
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, {anal_type: this.analyse_type}).then(res => {
            this.$refs.pageHeader.getList(res.data)
          })
        })
      },
      // 添加筛选条件
      addCondition () {
        if (this.conditionList.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: '',
            vs_bool_code_value: '',
            meta_id: null,
            disp_serial: null,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          let groupData = {
            vs_bool_code: 'B010006',
            disp_serial: null,
            cond_link: null,
            elem_type: 'W',
            cond_groups: []
          }
          let count = this.conditionList.length
          if (count === 0) {
            this.cond_arr1 = this.data.META_COLUME
            this.conditionList.splice(this.conditionList.length, 0, groupData)
            this.conditionList[count].cond_groups.splice(0, 0, itemData)
            this.conditionList[count].disp_serial = count
            this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
          } else {
            this.conditionList.splice(this.conditionList.length, 0, groupData)
            this.conditionList[count].cond_groups.splice(0, 0, itemData)
            this.conditionList[count].disp_serial = count
            this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
          }
          count++
        } else {
          Msg.alert('分组最多添加三个')
        }
      },
      // 切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal === this.data.B010006[0]) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 添加一行
      addRow (group, ind) {
        if (group.cond_groups.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: 'B010006',
            vs_bool_code_value: this.data.B010006[0].code_value,
            meta_id: null,
            disp_serial: ind + 1,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
          group.cond_groups.splice(ind + 1, 0, itemData)
        } else {
          Msg.alert('分组最多添加三个')
        }
      },
      // 切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 查看结果
      search () {
        this.conditionList.forEach(item => {
          item.cond_link = `${item.vs_bool_code}#${this.groupBtnVal.code_value}`
        })
        if (!this.groupVal[0].meta_id) {
          Msg.alert('请选择分组')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        let message = {
          analyse_type: this.analyse_type,
          meta_id: this.Attribute,
          g_list: this.groupVal,
          w_list: this.conditionList,
          from_date: this.from_date,
          to_date: this.to_date
        }
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          if (res.data.rows.length > 0) {
            this.attListHead = res.data.title
            this.attListContent = res.data.rows
            res.data.title.forEach(item => {
              this.option.legend.data.push(item)
            })
            res.data.rows.forEach(obj => {
              this.option.xAxis.data.push(obj.by_value_name)
            })
            res.data.title.forEach(item => {
              let dataObj = {}
              dataObj.name = item
              dataObj.type = 'line'
              dataObj.data = []
              res.data.rows.forEach(obj => {
                for (let i = 0; i < obj.cells.length; i++) {
                  if (obj.cells[i].title === dataObj.name) {
                    dataObj.data.push(obj.cells[i].people)
                    break
                  }
                }
              })
              this.option.series.push(dataObj)
            })
          } else {
            Msg.alert('没有查找到数据')
          }
        })
      },
      // 判断条件
      getBool_1 (item) {
        const type = item.vs_data_type
        const value = item.vs_code_value
        if (type === 'number' && value > 0 && value < 9) { // 1-8
          return true
        } else if (type === 'text' && value > 0 && value < 11) { // 1-10
          return true
        } else if (type === 'date' && value > 0 && value < 11) { // 1-10
          return true
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        }
      },
      getBool_4 (item) {
        return false
      },
      getDate (list) {
        if (list) {
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.eventAttrArr = this.data.B020002
      this.clusteringList = this.data.META_COLUME
      this.groupBtnVal = this.data.B010006[0]
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #user-attribute
    height 100%
    .box
      height calc(100% - 56px)
      padding 10px 0 10px 10px
      .box-con
        padding-right 10px
        height 100%
        overflow: auto
        .query-conditions
          .attr-conditions
            border-bottom 1px solid #D8DCE5
            & > .comm-used
              height 50px
              line-height 50px
              padding 0 20px
              font-size 0
            .com-content
              height: 50px
              line-height 50px
              padding 0 20px
              color #5a5e66
              font-size 0
              span.font12
                display: inline-block
                width 80px
                height 30px
                margin-right 5px
                font-size 12px
              #VNumberSelect
                font-size 15px
                margin-right 10px
              i.iconfont
                color #d8dce5
                margin 0 5px 0 5px
                font-size 14px
              i.iconfont:hover
                color #016DFB
            .ovh
              overflow hidden
          .conditions
            padding-bottom 20px
            .filter-conditions:before
              content ''
              width 0
              height calc(100% - 50px)
              border-left 1px solid #D8DCE5
              position absolute
              left 44.5px
              top 40px
          /*筛选条件 start*/
          .filter-conditions
            padding 30px 20px 20px 30px
            .conditions-list:before
              content ''
              width 0
              height calc(100% - 20px)
              border-left 1px solid #D8DCE5
              position absolute
              left 15px
              top 10px
            .conditions-list
              padding-left 40px
              position relative
              .el-input__inner
                font-size 12px
              .group-btn
                position absolute
                left 0
                top 50%
                margin-top -15px
              .condition-group-list
                .group-head
                  height 50px
                .condition-group
                  & > div
                    height 50px
                    line-height 50px
                    padding-left 10px
                  .item-btn
                    position relative
                    .v-button
                      position absolute
                  .condition-group-item
                    // background #f4f4f5
                    overflow hidden
                    & > .el-input
                      width 120px
                    .date-time
                      padding-left 10px
                      .el-date-editor
                        position relative
                        margin 0 10px
                        padding-top 0px
                        .el-range__icon
                          line-height 25px
                        .el-range-input, .el-range-separator
                          position relative
                        .el-range-separator
                          padding 0
                          font-size 12px
                    .amount-range
                      padding-left 10px
                      .el-input
                        margin 0 8px
                    .v-select-checkbox
                      margin-left 10px
                    .icons-list
                      margin-left 15px
                      i.iconfont
                        font-size 14px
                        margin-right 10px
                        color #D8DCE5
                      i.iconfont:hover
                        color #016DFB
        /*筛选条件 end*/
        .add-condition
          width 170px
          height 50px
          line-height 50px
          padding 0 20px 0 30px
          cursor pointer
          .el-button
            width 30px
            height 30px
            display inline-block
            padding 0
            .el-icon-plus
              font-size 16px
              font-weight bold
          span
            font-size 12px
            color #016DFB
            margin-left 10px
        .examine
          height 30px
          line-height 30px
          padding 0 20px
          margin-top 30px
          .btns
            width 146px
            .el-button
              display inline-block
              width 65px
              height 30px
              line-height 0
        .view-user-wealth
          color #5A5E66
          margin-top 10px
          padding 20px
          h6.font16
            color #6C7079
            text-align center
          .conditions
            width 300px
            height 30px
            float right
            .el-checkbox
              margin-right 20px
              .el-checkbox__label
                font-size 12px
            .el-dropdown
              display inline-block
              width 64px
              height 30px
              line-height 30px
              text-align center
              border 1px solid #D8DCE5
              font-size 12px
            .el-dropdown:nth-child(2)
              border-top-left-radius 4px
              border-bottom-left-radius 4px
            .el-dropdown:nth-child(3)
              border-left transparent
              border-right transparent
            .el-dropdown:nth-child(4)
              border-top-right-radius 4px
              border-bottom-right-radius 4px
          .user-echarts
            margin-top 10px
          .sex-color
            width 100%
            margin 30px auto
            text-align center
            i
              display inline-block
              width 13px
              height 13px
              border-radius 50%
            span
              display inline-block
              width 120px
              height auto
              text-align center
              margin-top 5px
            span:nth-child(2)
              margin 0 50px
            span:nth-child(6)
              margin 0 50px
        .serch-result
          padding 0 20px
          .head-bar
            margin-bottom 20px
            overflow hidden
            .el-input
              width 200px
            .el-input__icon
              line-height 0
            .btns
              .el-button
                width 30px
                height 30px
                padding 0
                i.iconfont
                  color #B4BCCC
          .table-rows
            border: 1px solid #D8DCE5
            border-collapse collapse
            text-align center
            color #5A5E66
            th
              font-weight normal
              border-left 1px solid #D8DCE5
              border-top 1px solid #D8DCE5
              height 50px
              font-size 14px
              background-color #f4f4f5
            td
              border-left 1px solid #D8DCE5
              border-top 1px solid #D8DCE5
              height 50px
              padding 0 20px
              font-size 12px
</style>
